<script setup lang="ts">
import {onMounted, ref} from 'vue';
import ProgressRing from './components/ProgressRing.vue';
import CardContainer from "../../components/CardContainer.vue";
import UserInfoCard from './components/UserInfoCard.vue';
import SubmitStats from './components/SubmitStats.vue';
import RecentInfo from './components/RecentInfo.vue';
import {QuestionControllerService, SolveHistoryVO, UserControllerService, UserInfoVO} from "../../../generated";
import {useRoute} from "vue-router";

let route = useRoute();

const userInfo = ref<UserInfoVO>({
  account: '',
  username: '',
  avatar: '',
  profile: '',
  ipAddress: '',
  currentResidence: '',
  gender: 0,
  tagList: []
});

const stats = ref<SolveHistoryVO>({});

const fetchUserInfo = async () => {
  let res = await UserControllerService.getUserInfoByUsernameUsingGet(route.params.account as string);
  if (res.code === 0 && res.data) {
    userInfo.value = res.data;
  }
}

const fetchSolveHistory = async () => {
  let res = await QuestionControllerService.getSolveHistoryUsingGet(route.params.account as string);
  if (res.code === 0 && res.data) {
    stats.value = res.data
  }
}

onMounted(() => {
  fetchUserInfo()
  fetchSolveHistory()
})
</script>

<template>
  <div class="profile-container">
    <div class="left-column">
      <UserInfoCard :user-info="userInfo"/>
    </div>
    <div class="right-column">
      <div class="stats-grid">
        <CardContainer class="stats-card">
          <ProgressRing :data="stats"/>
        </CardContainer>
        <CardContainer class="stats-card">
          <SubmitStats/>
        </CardContainer>
        <CardContainer class="stats-card">
          <RecentInfo/>
        </CardContainer>
      </div>
    </div>
  </div>
</template>

<style scoped>
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  gap: 24px;
}

/* 在小屏幕下改为垂直布局 */
@media (max-width: 768px) {
  .profile-container {
    flex-direction: column;
  }

  .left-column {
    width: 100%;
  }
}

.left-column {
  width: 280px;
  flex-shrink: 0;
}

.right-column {
  flex: 1;
  min-width: 0; /* 防止子元素溢出 */
}

.stats-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

.stats-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  box-sizing: border-box;
}

.stats-card {
  min-height: 50px;
  box-sizing: border-box;
}
</style>

<style>
/* 自定义下拉框样式 */
.time-select-dropdown {
  --el-select-dropdown-bg-color: #fff;
  --el-select-dropdown-border-color: transparent;
  --el-select-dropdown-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.time-select .el-input__wrapper {
  background-color: #f5f5f5 !important;
  box-shadow: none !important;
  border: none !important;
}

.time-select .el-input__wrapper:hover {
  background-color: #e8e8e8 !important;
}

.time-select .el-input__inner {
  font-size: 14px !important;
  color: #666 !important;
}
</style>
